﻿$(function () {
  echarts_1();
  echarts_2();
  echarts_4();
  echarts_31();
  echarts_32();
  echarts_33();
  echarts_5();
  echarts_6();
  echarts_7();
  function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart1"));

    // option = {
    //   //  backgroundColor: '#00265f',
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: {
    //       type: "shadow",
    //     },
    //   },
    //   grid: {
    //     left: "0%",
    //     top: "10px",
    //     right: "0%",
    //     bottom: "4%",
    //     containLabel: true,
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       data: [
    //         "商超门店",
    //         "教育培训",
    //         "房地产",
    //         "生活服务",
    //         "汽车销售",
    //         "旅游酒店",
    //         "五金建材",
    //       ],
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //           width: 1,
    //           type: "solid",
    //         },
    //       },

    //       axisTick: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         interval: 0,
    //         // rotate:50,
    //         show: true,
    //         splitNumber: 15,
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: "12",
    //         },
    //       },
    //     },
    //   ],
    //   yAxis: [
    //     {
    //       type: "value",
    //       axisLabel: {
    //         //formatter: '{value} %'
    //         show: true,
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: "12",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1	)",
    //           width: 1,
    //           type: "solid",
    //         },
    //       },
    //       splitLine: {
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       type: "bar",
    //       data: [200, 300, 300, 900, 1500, 1200, 600],
    //       barWidth: "35%", //柱子宽度
    //       // barGap: 1, //柱子之间间距
    //       itemStyle: {
    //         normal: {
    //           color: "#2f89cf",
    //           opacity: 1,
    //           barBorderRadius: 5,
    //         },
    //       },
    //     },
    //   ],
    // };

    option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        // top: "5%",
        // left: "center",
        top: "20%", //距上
        right: "8%", //距右
        orient: "vertical", //纵向排列
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
        itemGap: 16,
      },
      series: [
        {
          center: ["30%", "50%"],
          // name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "rgb(11,23,73)",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: "8.83",
              name: "今日订单 8.83%",
              itemStyle: { color: "#FF535F" },
            },
            {
              value: "7.56",
              name: "昨日订单 7.56%",
              itemStyle: { color: "#FFB880" },
            },
            {
              value: "20.47",
              name: "本月清单 20.47%",
              itemStyle: { color: "#02FFFF" },
            },
            {
              value: "19.25",
              name: "上月订单 19.25%",
              itemStyle: { color: "#007DFF" },
            },
            {
              value: "45.36",
              name: "过去订单 45.36%",
              itemStyle: { color: "#005C8A" },
            },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart2"));

    // option = {
    //   //  backgroundColor: '#00265f',
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: { type: "shadow" },
    //   },
    //   grid: {
    //     left: "0%",
    //     top: "10px",
    //     right: "0%",
    //     bottom: "4%",
    //     containLabel: true,
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       data: ["浙江", "上海", "江苏", "广东", "北京", "深圳", "安徽"],
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //           width: 1,
    //           type: "solid",
    //         },
    //       },

    //       axisTick: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         interval: 0,
    //         // rotate:50,
    //         show: true,
    //         splitNumber: 15,
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: "12",
    //         },
    //       },
    //     },
    //   ],
    //   yAxis: [
    //     {
    //       type: "value",
    //       axisLabel: {
    //         //formatter: '{value} %'
    //         show: true,
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: "12",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1	)",
    //           width: 1,
    //           type: "solid",
    //         },
    //       },
    //       splitLine: {
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       type: "bar",
    //       data: [1500, 1200, 600, 200, 300, 300, 900],
    //       barWidth: "35%", //柱子宽度
    //       // barGap: 1, //柱子之间间距
    //       itemStyle: {
    //         normal: {
    //           color: "#27d08a",
    //           opacity: 1,
    //           barBorderRadius: 5,
    //         },
    //       },
    //     },
    //   ],
    // };

    option = {
      color: ["#1F88EA", "#02FFFF", "#F8B551"],
      // title: {
      //   text: "Gradient Stacked Area Chart",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        // data: ["下单量", "访问数", "曝光量"],
        data: [
          {
            name: "下单量",
            icon: "rect", // 用矩形替换
          },
          {
            name: "访问数",
            icon: "rect", // 用矩形替换
          },
          {
            name: "曝光量",
            icon: "rect", // 用矩形替换
          },
        ],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
        itemWidth: 25, //矩形宽度
        itemHeight: 2, //矩形高度
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["0:00", "4:00", "8:00", "12:00", "16:00", "20:00", "24:00"],
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //y轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
        },
      ],
      series: [
        {
          name: "下单量",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            // width: 0,
            color: "#1F88EA",
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#1F88EA",
              },
              {
                offset: 1,
                color: "rgba(31,136,234,0.05)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [140, 232, 101, 264, 90, 340, 250],
        },
        {
          name: "访问数",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            // width: 0,
            color: "#02FFFF",
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#02FFFF",
              },
              {
                offset: 1,
                color: "rgba(2,255,255,0.02)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 282, 111, 234, 220, 340, 310],
        },
        {
          name: "曝光量",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            // width: 0,
            color: "#F8B551",
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#F8B551",
              },
              {
                offset: 1,
                color: "rgba(248,181,81,0.05)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 132, 201, 334, 190, 130, 220],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart5"));

    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },

      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid",
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: [2, 3, 3, 9, 15, 12],
          barWidth: "35%", //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#FFB880" },
                { offset: 1, color: "#FF535F" },
              ]),
              opacity: 1,
              barBorderRadius: 5,
            },
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value[0];
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart4"));

    // option = {
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: {
    //       lineStyle: {
    //         color: "#dddc6b",
    //       },
    //     },
    //   },
    //   legend: {
    //     top: "0%",
    //     data: ["安卓", "IOS"],
    //     textStyle: {
    //       color: "rgba(255,255,255,.5)",
    //       fontSize: "12",
    //     },
    //   },
    //   grid: {
    //     left: "10",
    //     top: "30",
    //     right: "10",
    //     bottom: "10",
    //     containLabel: true,
    //   },

    //   xAxis: [
    //     {
    //       type: "category",
    //       boundaryGap: false,
    //       axisLabel: {
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: 12,
    //         },
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(255,255,255,.2)",
    //         },
    //       },

    //       data: [
    //         "01",
    //         "02",
    //         "03",
    //         "04",
    //         "05",
    //         "06",
    //         "07",
    //         "08",
    //         "09",
    //         "11",
    //         "12",
    //         "13",
    //         "14",
    //         "15",
    //         "16",
    //         "17",
    //         "18",
    //         "19",
    //         "20",
    //         "21",
    //         "22",
    //         "23",
    //         "24",
    //       ],
    //     },
    //     {
    //       axisPointer: { show: false },
    //       axisLine: { show: false },
    //       position: "bottom",
    //       offset: 20,
    //     },
    //   ],

    //   yAxis: [
    //     {
    //       type: "value",
    //       axisTick: { show: false },
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //         },
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: "rgba(255,255,255,.6)",
    //           fontSize: 12,
    //         },
    //       },

    //       splitLine: {
    //         lineStyle: {
    //           color: "rgba(255,255,255,.1)",
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       name: "安卓",
    //       type: "line",
    //       smooth: true,
    //       symbol: "circle",
    //       symbolSize: 5,
    //       showSymbol: false,
    //       lineStyle: {
    //         normal: {
    //           color: "#0184d5",
    //           width: 2,
    //         },
    //       },
    //       areaStyle: {
    //         normal: {
    //           color: new echarts.graphic.LinearGradient(
    //             0,
    //             0,
    //             0,
    //             1,
    //             [
    //               {
    //                 offset: 0,
    //                 color: "rgba(1, 132, 213, 0.4)",
    //               },
    //               {
    //                 offset: 0.8,
    //                 color: "rgba(1, 132, 213, 0.1)",
    //               },
    //             ],
    //             false,
    //           ),
    //           shadowColor: "rgba(0, 0, 0, 0.1)",
    //         },
    //       },
    //       itemStyle: {
    //         normal: {
    //           color: "#0184d5",
    //           borderColor: "rgba(221, 220, 107, .1)",
    //           borderWidth: 12,
    //         },
    //       },
    //       data: [
    //         3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2,
    //         4,
    //       ],
    //     },
    //     {
    //       name: "IOS",
    //       type: "line",
    //       smooth: true,
    //       symbol: "circle",
    //       symbolSize: 5,
    //       showSymbol: false,
    //       lineStyle: {
    //         normal: {
    //           color: "#00d887",
    //           width: 2,
    //         },
    //       },
    //       areaStyle: {
    //         normal: {
    //           color: new echarts.graphic.LinearGradient(
    //             0,
    //             0,
    //             0,
    //             1,
    //             [
    //               {
    //                 offset: 0,
    //                 color: "rgba(0, 216, 135, 0.4)",
    //               },
    //               {
    //                 offset: 0.8,
    //                 color: "rgba(0, 216, 135, 0.1)",
    //               },
    //             ],
    //             false,
    //           ),
    //           shadowColor: "rgba(0, 0, 0, 0.1)",
    //         },
    //       },
    //       itemStyle: {
    //         normal: {
    //           color: "#00d887",
    //           borderColor: "rgba(221, 220, 107, .1)",
    //           borderWidth: 12,
    //         },
    //       },
    //       data: [
    //         5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1,
    //         4,
    //       ],
    //     },
    //   ],
    // };

    option = {
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          // name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "0%"],
          // adjust the start angle
          startAngle: 0,
          label: {
            show: true,
            formatter(param) {
              // correct the percentage
              return param.name + "：" + param.value;
            },
          },
          data: [
            { value: 10, name: "今日新增" },
            { value: 20, name: "昨日新增" },
            { value: 30, name: "本月新增" },
            { value: 40, name: "上月新增" },
            { value: 50, name: "过去新增" },
            {
              // make an record to fill the bottom 50%
              value: 10 + 20 + 30 + 40 + 50,
              itemStyle: {
                // stop the chart from rendering this piece
                color: "none",
                decal: {
                  symbol: "none",
                },
              },
              label: {
                show: false,
              },
            },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart6"));

    // var dataStyle = {
    //   normal: {
    //     label: {
    //       show: false,
    //     },
    //     labelLine: {
    //       show: false,
    //     },
    //     //shadowBlur: 40,
    //     //shadowColor: 'rgba(40, 40, 40, 1)',
    //   },
    // };
    // var placeHolderStyle = {
    //   normal: {
    //     color: "rgba(255,255,255,.05)",
    //     label: { show: false },
    //     labelLine: { show: false },
    //   },
    //   emphasis: {
    //     color: "rgba(0,0,0,0)",
    //   },
    // };
    // option = {
    //   color: ["#0f63d6", "#0f78d6", "#0f8cd6", "#0fa0d6", "#0fb4d6"],
    //   tooltip: {
    //     show: true,
    //     formatter: "{a} : {c} ",
    //   },
    //   legend: {
    //     itemWidth: 10,
    //     itemHeight: 10,
    //     itemGap: 12,
    //     bottom: "3%",

    //     data: ["浙江", "上海", "广东", "北京", "深圳"],
    //     textStyle: {
    //       color: "rgba(255,255,255,.6)",
    //     },
    //   },

    //   series: [
    //     {
    //       name: "浙江",
    //       type: "pie",
    //       clockWise: false,
    //       center: ["50%", "42%"],
    //       radius: ["59%", "70%"],
    //       itemStyle: dataStyle,
    //       hoverAnimation: false,
    //       data: [
    //         {
    //           value: 80,
    //           name: "01",
    //         },
    //         {
    //           value: 20,
    //           name: "invisible",
    //           tooltip: { show: false },
    //           itemStyle: placeHolderStyle,
    //         },
    //       ],
    //     },
    //     {
    //       name: "上海",
    //       type: "pie",
    //       clockWise: false,
    //       center: ["50%", "42%"],
    //       radius: ["49%", "60%"],
    //       itemStyle: dataStyle,
    //       hoverAnimation: false,
    //       data: [
    //         {
    //           value: 70,
    //           name: "02",
    //         },
    //         {
    //           value: 30,
    //           name: "invisible",
    //           tooltip: { show: false },
    //           itemStyle: placeHolderStyle,
    //         },
    //       ],
    //     },
    //     {
    //       name: "广东",
    //       type: "pie",
    //       clockWise: false,
    //       hoverAnimation: false,
    //       center: ["50%", "42%"],
    //       radius: ["39%", "50%"],
    //       itemStyle: dataStyle,
    //       data: [
    //         {
    //           value: 65,
    //           name: "03",
    //         },
    //         {
    //           value: 35,
    //           name: "invisible",
    //           tooltip: { show: false },
    //           itemStyle: placeHolderStyle,
    //         },
    //       ],
    //     },
    //     {
    //       name: "北京",
    //       type: "pie",
    //       clockWise: false,
    //       hoverAnimation: false,
    //       center: ["50%", "42%"],
    //       radius: ["29%", "40%"],
    //       itemStyle: dataStyle,
    //       data: [
    //         {
    //           value: 60,
    //           name: "04",
    //         },
    //         {
    //           value: 40,
    //           name: "invisible",
    //           tooltip: { show: false },
    //           itemStyle: placeHolderStyle,
    //         },
    //       ],
    //     },
    //     {
    //       name: "深圳",
    //       type: "pie",
    //       clockWise: false,
    //       hoverAnimation: false,
    //       center: ["50%", "42%"],
    //       radius: ["20%", "30%"],
    //       itemStyle: dataStyle,
    //       data: [
    //         {
    //           value: 50,
    //           name: "05",
    //         },
    //         {
    //           value: 50,
    //           name: "invisible",
    //           tooltip: { show: false },
    //           itemStyle: placeHolderStyle,
    //         },
    //       ],
    //     },
    //   ],
    // };

    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "10%",
        left: "10%",
        right: "10%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: {
        show: true,
        axisLabel: {
          show: false,
        },
        splitLine: { show: false },
        axisLine: {
          show: false, // 轴线
        },
        axisTick: {
          show: false, // 刻度线
        },
      },
      yAxis: {
        type: "category",
        inverse: true, // 倒叙
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          formatter: (val) => {
            return `${val}`;
          },
        },
        axisLine: {
          show: false, // 轴线
        },
        axisTick: {
          show: false, // 刻度线
        },
        data: [
          "重庆市",
          "四川省",
          "贵州省",
          "湖南省",
          "江西省",
          "福建省",
          "湖北省",
        ],
      },
      series: [
        {
          name: "Echarts",
          type: "bar",
          barWidth: 10,
          showBackground: true,
          barMaxWidth: 20,
          barMinWidth: 5,
          itemStyle: {
            borderRadius: [0, 10, 10, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 0, color: "#02FFFF" },
              { offset: 1, color: "#007DFF" },
            ]),
            borderWidth: 1,
            borderColor: "black",
          },
          data: [700, 600, 500, 400, 300, 200, 100],
          label: {
            show: true,
            formatter(param) {
              // correct the percentage
              return param.value;
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("fb1"));
    option = {
      title: [
        {
          text: "年龄分布",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {
          //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      legend: {
        top: "70%",
        itemWidth: 10,
        itemHeight: 10,
        data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
            "#06b4ab",
            "#06c8ab",
            "#06dcab",
            "#06f0ab",
          ],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 1, name: "0岁以下" },
            { value: 4, name: "20-29岁" },
            { value: 2, name: "30-39岁" },
            { value: 2, name: "40-49岁" },
            { value: 1, name: "50岁以上" },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("fb2"));
    option = {
      title: [
        {
          text: "职业分布",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {
          //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      legend: {
        top: "70%",
        itemWidth: 10,
        itemHeight: 10,
        data: ["电子商务", "教育", "IT/互联网", "金融", "学生", "其他"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
            "#06b4ab",
            "#06c8ab",
            "#06dcab",
            "#06f0ab",
          ],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 5, name: "电子商务" },
            { value: 1, name: "教育" },
            { value: 6, name: "IT/互联网" },
            { value: 2, name: "金融" },
            { value: 1, name: "学生" },
            { value: 1, name: "其他" },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_33() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("fb3"));
    option = {
      title: [
        {
          text: "兴趣分布",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {
          //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      legend: {
        top: "70%",
        itemWidth: 10,
        itemHeight: 10,
        data: ["汽车", "旅游", "财经", "教育", "软件", "其他"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "兴趣分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
            "#06b4ab",
            "#06c8ab",
            "#06dcab",
            "#06f0ab",
          ],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 2, name: "汽车" },
            { value: 3, name: "旅游" },
            { value: 1, name: "财经" },
            { value: 4, name: "教育" },
            { value: 8, name: "软件" },
            { value: 1, name: "其他" },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function echarts_7() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart7"));
    option = {
      xAxis: {
        type: "category",
        data: ["今日用户数", "昨日用户数", "本月用户数", "上月用户数"],
        axisLabel: {
          //x轴文字的配置
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.5)",
          },
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          //y轴文字的配置
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.5)",
          },
        },
      },
      series: [
        {
          data: [
            {
              value: 345,
              itemStyle: {
                color: "#FF535F",
              },
            },
            {
              value: 34,
              itemStyle: {
                color: "#FFB880",
              },
            },
            {
              value: 785,
              itemStyle: {
                color: "#02FFFF",
              },
            },
            {
              value: 457,
              itemStyle: {
                color: "#007DFF",
              },
            },
          ],
          type: "bar",
          label: {
            show: true,
            formatter: function (params) {
              return params.value[0];
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
});
